<template>
  <div>
    <div id="Gallery" class="mui-slider" style>
      <div class="mui-slider-group">
        <div class="mui-slider-item" v-for="(item, index) in optionList" :key="index">
          <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li
              class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"
              v-for="(ty, i) in item"
              :key="i"
            >
              <router-link :to="`/food?head=${ty.title}&id=${ty.id}`">
                <img :src="'https://fuss10.elemecdn.com/'+ty.image_url" alt />
                <div class="mui-media-body">{{ty.title}}</div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>
  </div>
</template>

<script>
import mui from 'lib/mui/js/mui.js'

export default {
  data() {
    return {
      optionList: []
    }
  },
  methods: {
    getOption() {
      let option = JSON.parse(localStorage.getItem('optionList'))
      if (option) {
        this.optionList = option
      } else {
        this.$http
          .get('https://elm.cangdu.org/v2/index_entry')
          .then(({ body }) => {
            let i = 0
            let index = 0
            for (let key in body) {
              if (index == 0) {
                this.optionList.push([])
              }
              this.optionList[i].push(body[key])
              index++
              // window.console.log(body[key])
              if (index == 8) {
                index = 0
                i++
              }
            }
            localStorage.setItem('optionList', JSON.stringify(this.optionList))
          })
      }
    }
  },
  created() {
    this.getOption()
  },
  updated() {
    //数据更新后执行,页面上的dom是请求到数据后才渲染上去的
    //所以不能mounted中执行dom操作,而是要等到数据完全渲染到页面后才能操作
    var galler = mui('.mui-slider')
    galler.slider({
      interval: 0
    })
  }
}
</script>
<style scoped>
.mui-grid-view.mui-grid-9 {
  background-color: #ffffff;
  border: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
  /* 取消li的内边距*/
  padding: 0px;
  border: none;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  font-size: 4vw;
  color: #666666;
}
.mui-col-xs-4 {
  /*修改为每排四个图标*/
  width: 25%;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell > a:not(.mui-btn) {
  /*每个小图标的上下内边距改成5px*/
  padding: 5px 0px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  /*文字div的外边距改成0*/
  margin: 0;
  height: 4vw;
  text-align: center;
  line-height: 4vw;
}
.mui-slider-indicator {
  /*把页面点改为相对定位*/
  position: relative;
  background-color: #ffffff;
  top: 0px;
  border-bottom: 1px #aaa solid;
}
.mui-slider-indicator .mui-active.mui-indicator {
  background: #007aff;
}
.mui-slider .mui-slider-group .mui-slider-item img {
  width: 50%;
}
</style>